import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import { Flex, Image, Typography } from 'antd';
import { useParams } from '@@/exports';
import {
  getPictureVoByIdUsingGet,
  searchPictureByPictureUsingPost,
} from '@/services/backend/pictureController';

const { Title } = Typography;

const IndexPage: React.FC = () => {
  const { id } = useParams();
  const [picture, setPicture] = useState<API.PictureVO>();
  const [picList, setPicList] = useState<API.ImageSearchResult[]>();
  const getPicture = async () => {
    const res = await getPictureVoByIdUsingGet({ id });
    setPicture(res.data);
  };
  const doSearch = async () => {
    const res = await searchPictureByPictureUsingPost({ pictureId: id });
    setPicList(res.data);
  };
  useEffect(() => {
    const loadData = async () => {
      await getPicture();
      await doSearch();
    };
    loadData();
  }, [id]);

  return (
    <PageContainer breadcrumbRender={false} title={<></>}>
      <Title level={4}>原图</Title>
      <Image src={picture?.url} style={{ width: 200 }}></Image>
      <Title level={4} style={{ marginTop: 24 }}>
        搜索结果
      </Title>
      <div>
        <Flex wrap gap="small">
          {picList?.map((item) => {
            return (
              <Image
                src={item.thumbUrl}
                style={{ width: 200, marginRight: 16 }}
                key={item.thumbUrl}
              ></Image>
            );
          })}
        </Flex>
      </div>
    </PageContainer>
  );
};

export default IndexPage;
